<script setup>

import {computed, inject, onMounted, ref, watch} from "vue";
import {doMusicianApproval, queryAlbumPages, queryMusicianPages} from "@/api/approval/approval.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import request from "@/api/request.js";
import AlbumDetail from "@/components/AlbumDetail.vue";
import {useStore} from "@/stores/store.js";
const router = useRouter()

// 筛选条件
const statusFilter = ref(null);
const styleFilter = ref(null);
const startDateFilter = ref(null);
const endDateFilter = ref(null);
const styles = ref([])
// 列表数据
const applications = ref([


]);
const currentPage = ref(1);
const pageSize = ref(10)
const total = ref(0)
const listLoading = ref(false)

const getList = () => {
  listLoading.value = true

  queryAlbumPages(statusFilter.value, styleFilter.value, startDateFilter.value, endDateFilter.value,
      currentPage.value, pageSize.value).then((res) => {
    applications.value = res.data.records
    // pageCount.value = res.data.pages
    total.value = res.data.total
    listLoading.value = true
  })
}

watch(currentPage, () => getList())
watch(pageSize, () => getList())

// 拉取用户的专辑

onMounted(() => {
  getList()

  request({
    url: "/music/album/styles/list" ,
    method: 'get'
  }).then((res) => {
    styles.value = res.data
  })
})
// 查看详情
const viewDetails = (row) => {
  useStore().showAlbumDetail = true
  // row.style = styles.value.find(record => record.id == row.styleId).title
  useStore().rowId = row.id

}
</script>

<template>
  <AlbumDetail :styles="styles" v-if="useStore().showAlbumDetail"></AlbumDetail>
  <div v-else >
    <el-header>
      <el-form inline style="margin-top: 20px">
        <el-form-item label="状态">
          <el-select style="width: 100px" v-model="statusFilter" placeholder="选择状态">
            <el-option label="未处理" :value="0"></el-option>
            <el-option label="已批准" :value="1"></el-option>
            <el-option label="已拒绝" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风格">
          <el-select style="width: 100px" v-model="styleFilter" placeholder="选择类型">
            <el-option style="font-size: 12px;" v-for="item in styles" :label="item.title" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="开始日期">
          <el-date-picker
              v-model="startDateFilter"
              type="date"
              placeholder="选择开始日期"
              style="width: 150px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
              v-model="endDateFilter"
              type="date"
              placeholder="选择结束日期"
              style="width: 150px">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-header>

    <el-main>
      <el-table border :data="applications" style="width: 100%">
        <el-table-column prop="musicianAccount" label="申请账号"></el-table-column>
        <el-table-column prop="albumName" label="专辑名"></el-table-column>
        <el-table-column prop="musicianName" label="音乐人"></el-table-column>
        <el-table-column prop="styleId" label="风格" :formatter="row => styles.find(record => record.id == row.styleId).title"></el-table-column>
        <el-table-column prop="applyTime" label="申请时间"></el-table-column>
        <el-table-column prop="musicCount" label="歌曲数量"></el-table-column>
        <el-table-column
            prop="status"
            label="状态"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">未处理</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="success">已批准</el-tag>
            <el-tag v-else type="danger">已拒绝</el-tag>
          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="viewDetails(scope.row)">去审批</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          style="margin-top: 10px;padding: 5px"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[5, 10, 15, 20]"
          @current-change="(value) => currentPage = value"
          @size-change="(value) => pageSize = value"
          size="large"
          layout="jumper, ->, sizes, total, prev, pager, next"
      ></el-pagination>
    </el-main>

  </div>

</template>

<style scoped>

</style>
